<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      在组件上使用 v-model 

        回忆一下在普通的表单元素上使用 v-model 的展开形式：
          v-model="username"
          :value="username"   @input="username = $event.target.value"
          :checked="username" @change="username = $event.target.value"

        组件上使用 v-model 的展开形式：
          <Person v-model="username" ></Person>

          Vue2 展开如下：
            <Person :value="username" @input="username = $event" ></Person>

          Vue3 展开如下：
            <Person :modelValue="username" @update:modelValue="username = $event" ></Person>

     -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const Person = {
        template: `
          <div>
            <p>姓名：{{ modelValue }}</p> 
            <hr />
            <button @click="fn1">修改 username</button>
          </div>
        `,
        props: ["modelValue"],
        methods: {
          fn1() {
            this.$emit("update:modelValue", "里斯");
          },
        },
      };

      const app = Vue.createApp({
        // template: `
        //   <person :modelValue="name" @update:modelValue="name = $event"></person>
        // `,
        template: `  
           <person v-model="name"></person>

           <el-input v-model="msg" />
        `,
        data() {
          return {
            name: "张三",
            msg: "Hello",
          };
        },
      });

      app.component("person", Person);

      // <el-input v-model="msg" />
      // <el-input :modelValue="msg" @update:modelValue="msg = $event" />
      app.component("el-input", {
        template: `
          <input type="text" :value="modelValue" @input="handleInput" />
        `,
        props: ["modelValue"],

        methods: {
          handleInput(event) {
            console.log(event.target.value);
            // 要修改父组件传递过来的 modelValue 也就是父组件的 msg

            this.$emit("update:modelValue", event.target.value);
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
